<template>
  <div>
    <!-- 操作头 -->
    <div>
      <el-input
        v-model="value"
        prefix-icon="el-icon-search"
        placeholder="模糊搜索用户名、地区"
        :style="{width:'300px',margin:'10px'}"
      />
      <el-select v-model="value" placeholder="性别" :style="{width:'150px'}">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="value" placeholder="用户类型" :style="{width:'150px',margin:'10px'}">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="value" placeholder="状态" :style="{width:'150px'}">
        <el-option
          v-for="item in options3"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button
        type="primary"
        style="margin-left: 10px"
        size="medium"
      ><i class="el-icon-search" />搜索</el-button>
      <el-button type="success" size="medium">导出用户数据</el-button>
    </div>
    <!-- 表格内容 -->
    <el-table border :data="tableData" :style="{margin:'10px',width:'100%'}">
      <el-table-column align="center" type="selection" />
      <el-table-column align="center" label="用户ID" width="50px">
        <template slot-scope="scope">
          <span style="marginLeft: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="头像" width="80px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户名" width="80px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="账号" width="80px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="手机号" width="80px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="地区" width="180px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="性别" width="60px">
        <template slot-scope="scope">
          <el-tag size="medium" :type="scope.row.isRole?'success':'danger'">男</el-tag></template>
      </el-table-column>
      <el-table-column align="center" label="github账号" width="80px">
        <template slot-scope="scope">
          <el-tag type="info" size="medium">{{ scope.row.isRole? '是':'否' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="钉钉账号" width="80px">
        <template slot-scope="scope">
          <el-tag size="medium" :type="scope.row.isRole?'success':''">{{ scope.row.isRole? '是':'否' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="类别" width="80px">
        <template slot-scope="scope">
          <el-tag size="medium" :type="scope.row.isRole?'success':'danger'">{{ scope.row.isRole? '是':'否' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" width="100px">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="220px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="handleEdit(scope.$index, scope.row)"
          >详情</el-button>
          <el-button
            size="mini"
            type="warning"
            @click="handleEdit(scope.$index, scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >禁用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="block" align="center">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="5"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getRoleList } from '@/api/role'
export default {
  data() {
    return {
      options1: [{
        value: '选项1',
        label: '男'
      }, {
        value: '选项2',
        label: '女'
      }],
      options2: [{
        value: '选项1',
        label: '系统管理员'
      }, {
        value: '选项2',
        label: '小区管理员'
      }, {
        value: '选项3',
        label: '停车管理员'
      }],
      options3: [{
        value: '选项1',
        label: '启用'
      }, {
        value: '选项2',
        label: '禁用'
      }],
      input: '',
      value: '',
      tableData: [
        {
          id: '1',
          name: '系统管理员',
          isRole: true
        },
        {
          id: '2',
          name: '系统管理员',
          isRole: true
        },
        {
          id: '3',
          name: '系统管理员',
          isRole: false
        },
        {
          id: '4',
          name: '系统管理员',
          isRole: true
        }
      ],
      currentPage: 1
    }
  },
  created() {
    // this.getRoleList()
  },
  methods: {
    async getRoleList() {
      try {
        const data = await getRoleList()
        console.log(data)
      } catch (err) {
        console.log(err)
      }
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }

}
</script>
<style  scoped>
el-input::-webkit-input-placeholder {
    /* placeholder颜色 */
    color: #aab2bd;
    /* placeholder字体大小 */
    font-size: 12px;
}
</style>
